<template>
	<view class="backgroud">
		<view class="top">
			<!-- 返回箭头 -->
			<!-- 添加心动事件标题 -->
			<view class="toptitle">
				-{{numberChange}}分
			</view>
			<!-- 返回箭头（脱离文档流） -->
			<view>
				<image src="../../static/back666.png" class="back666" mode="widthFix" @tap="backEvent"></image>
			</view>
			<view>
				<!-- 时间： -->
				<view class="timestitle">
					时间：
				</view>
				<view class="timesdetail">
					{{times}}
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="biaoti">
				标题：
			</view>
			<!-- 事件和修改按钮 -->
			<view class="actionline">
				<view class="action" v-if="alteraction==false">
					{{action}}
				</view>
				<view class="action" v-else>
					<input type="text" class="action" v-model="action">
				</view>
				<view class="changebutton" @tap="aaction" v-if="alteraction==false">
					修改
				</view>
				<view class="changebutton" @tap="aaction" v-else>
					完成
				</view>
			</view>
			<!-- 描述和修改按钮 -->
			<view class="detailline">
				<view class="biaoti">
					描述：
				</view>
				<view class="changebutton" @tap="adetail" v-if="alterdetail==false">
					修改
				</view>
				<view class="changebutton" @tap="adetail" v-else>
					完成
				</view>
			</view>
			<!-- 纸张和文字 -->
			<view class="paperbottom">
				<image src="../../static/paper.png" class="paper"></image>
				<view class="papertext" v-if="alterdetail==false">
					{{detail}}
				</view>
				<view class="papertext" v-else>
					<textarea v-model="detail" class="papertext" cols="30" rows="10"></textarea>
				</view>
			</view>
			<view class="bottom-button-frame">
				<view class="bottom-button" @tap="commit">
					确认提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		onLoad(options) {
			this.accountId = uni.getStorageSync("id");
			this.cpId = uni.getStorageSync("cpId");
			this.numberChange = uni.getStorageSync("numberChange");
			this.action = uni.getStorageSync("action")
			this.times = uni.getStorageSync("times");
			this.detail = uni.getStorageSync("detail");
			this.id = uni.getStorageSync("itemId");
			this.type = uni.getStorageSync("type");
		},
		data() {
			return {
				alteraction: false,
				alterdetail: false,
				accountId: "",
				cpId: "",
				numberChange: '',
				action: '',
				times: '',
				detail: '',
				id: '',
				type: ''
			}
		},
		methods: {
			backEvent() {
				uni.navigateBack(1);
			},
			aaction() {
				this.alteraction = !this.alteraction
			},
			adetail() {
				this.alterdetail = !this.alterdetail
			},
			commit() {
				if (this.type === 'ta') {
					uni.request({
						header: {
							token: uni.getStorageSync("token")
						},
						data: {
							accountId: this.cpId,
							id: this.id,
							times: this.times,
							action: this.action,
							detail: this.detail,

						},
						url: "http://ls.xiake-half.com/item/updateItem",
						method: 'POST'
					})
				} else {
					uni.request({
						header: {
							token: uni.getStorageSync("token")
						},
						data: {
							accountId: this.accountId,
							id: this.id,
							times: this.times,
							action: this.action,
							detail: this.detail
						},
						url: "http://ls.xiake-half.com/item/updateItem",
						method: 'POST'
					})
				}

				uni.showToast({
					title: "修改成功",
					icon: 'success',
					duration: 1000
				})

				setTimeout(() => {
					uni.navigateBack(1);
				}, 1000)
			}
		}
	}
</script>

<style>
	.backgroud {
		background: #A2C7FE;
		min-height: 100vh;
		width: 100vw;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.back666 {
		position: absolute;
		top: 68px;
		left: 24px;
		height: 16px;
		width: 9px;
	}

	.top {
		position: relative;
		display: flex;
		flex-direction: column;
		padding-top: 66px;
		padding-left: 24px;
		padding-right: 24px;
	}

	.toptitle {
		height: 22px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 500;
		font-size: 16px;
		line-height: 22px;
		text-align: center;
		justify-content: center;
		color: #FFFFFF;
		margin-bottom: 21px;
	}

	.timestitle {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 36px;
		line-height: 36px;
		/* identical to box height, or 100% */


		color: #FFFFFF;

	}

	.timesdetail {
		margin-top: 12px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 24px;
		/* identical to box height, or 100% */

		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 24px;
	}

	.changebutton {
		height: 24px;
		width: 51px;
		text-align: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 14px;
		line-height: 38px;
		/* identical to box height, or 271% */
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFFFF;
		background: #A2C7FE;
		mix-blend-mode: normal;
		border-radius: 36px;
	}

	.bottom {
		display: flex;
		flex-direction: column;
		flex: 1;
		background: #FFFFFF;
		border-radius: 36px 36px 0px 0px;
		padding: 24px;
	}

	.biaoti {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 24px;
		/* identical to box height, or 100% */

		/* 带蓝深 */

		color: #121B36;
	}

	.actionline {
		margin-top: 9px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		margin-bottom: 27px;
	}

	.action {
		font-family: 'PingFang SC';
		display: flex;
		align-items: center;
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		line-height: 25.2px;
		text-align: left;
		/* identical to box height, or 100% */
		color: rgba(18, 27, 54, 0.6);
	}


	.detailline {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24px;
	}

	.papertext {
		position: absolute;
		width: 100%;
		top: 19px;
		left: 0px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 18px;
		line-height: 150%;
		/* or 27px */

		text-align: center;

		color: rgba(18, 27, 54, 0.6);
	}

	.bottom-button-frame {
		display: flex;
		flex: 1;
		justify-content: center;
	}

	.bottom-button {
		display: flex;
		margin-top: auto;
		justify-content: center;
		align-items: center;
		background: #A2C7FE;
		border-radius: 36px;
		width: 100%;
		height: 50px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 24px;
		line-height: 24px;
		/* identical to box height, or 100% */

		color: #FFFFFF;
	}

	.paper {
		width: 100%;
		height: 250px;
		border-radius: 18px;
	}

	.paperbottom {
		position: relative;
		background: #E8E8E8;
		box-shadow: inset 0px 0px 20px 5px rgba(142, 142, 142, 0.1);
		border-radius: 18px;
		overflow: hidden;
		padding: 11px;
	}
</style>